<template>
    
    <el-container class="home-container">
        <!-- 头部 -->
        <el-header>Vue-管理后台
            <div>
                <el-button type="info" plain @click="logout">信息按钮</el-button>
            </div>
        </el-header>
        <!-- 内容 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside :width="isCollapse ? '64px' : '200px'">
                
                <el-row class="tac">
                    <div class="toggle-button" @click="toggleCollapse()">
                        |||
                    </div>
                    <el-col >
                        <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        background-color="#fff"
                        text-color="#666"
                        active-text-color="#ffd04b"
                        :collapse="isCollapse"
                        :defaultActive="defaultActive"
                        router
                        >
                        <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
                            <!-- 一级分类 -->
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{item.anthName}}</span>
                            </template>
                            <!-- 二级分类 -->
                            <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id">{{subItem.anthName}}</el-menu-item>
                            
                        </el-submenu>
                        
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>

                <!-- 路由占位符 -->
                <router-view></router-view>

            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        data () {
            return {
                // 左侧菜单数据
                menulist: [
                    {
                        id : 2,
                        anthName: "用户管理",
                        path: null,
                        children:[
                            {
                                id:2000,
                                anthName: "个人中心",
                                path: "users/updete"
                            },
                            {
                                id:2001,
                                anthName: "用户列表",
                                path: "users"
                            },
                            
                        ]
                    },
                    {
                        id : 1,
                        anthName: "商品管理",
                        path: null,
                        children:[
                            {
                                id:1000,
                                anthName: "商品列表",
                                path: "goods"
                            },
                            {
                                id:1001,
                                anthName: "商品分类",
                                path: "categories"
                            }
                        ]
                    },
                    
                    

                ],
                // 左侧菜单折叠状态
                isCollapse: false,
                defaultActive : "this.$router.path"
            }
        },
        // 生命周期函数 
        created() {
        },
        methods : {
            logout () {
                window.sessionStorage.clear();
                this.$router.push('/login')
            },

            // 侧边菜单折叠展开
            toggleCollapse () {
                this.isCollapse = !this.isCollapse
            }
        }

    }
</script>

<style>
    .home-container {
        height: 100%;
        color: #fff;
        background:url('../assets/img/back.jpg') 100% 100% no-repeat;
        background-size: 100%;
    }
    .el-main{
        background-color: #fff;
    }
    .el-menu-vertical-demo {
        height: 97%;
    }
    .toggle-button {
        background-color: beige;
        font-size:12px;
        line-height:24px;
        color:#fff;
    }
</style>